<!DOCTYPE html>
<html spellcheck="false" data-vimium-hints="ordinal" class="loading">
  <head>
    <meta charset="utf-8">
    <title>Vimium C Options</title>
    <meta name="color-scheme" content="light dark">
    <script defer src="define.js" blocking="render"></script>
    <script type="module" src="async_bg.js" blocking="render"></script>
    <script type="module" src="options_base.js" blocking="render"></script>
    <script type="module" src="options_defs.js" blocking="render"></script>
    <script type="module" src="options_permissions.js" blocking="render"></script>
    <script type="module" src="options_wnd.js" blocking="render"></script>
    <link rel="stylesheet" href="options.css">
  </head>

  <body>
    <table id="wrapper">
      <thead><tr><td colspan="2">
        <header id="mainHeader">
          <img class="icon" alt="Icon" src="../icons/icon48.png"
              srcset="../icons/icon48.png 1x, ../icons/icon128.png 3x" />
          <span class="Vim">Vim</span>ium <span class="C">C</span>
          <span data-i="Name2Options">- All by Keyboard&nbsp;&nbsp;&nbsp;Options</span>
        </header>
      </td><td></td></tr></thead>
      <tbody>
      <tr>
        <td class="caption" data-i="1">Excluded URLs and keys</td>
        <td>
          <div id="exclusionRules" data-model="ExclusionRules">
            <table id="exclusionTable" class="code">
              <thead><tr>
                <td><span class="exclusionHeader" data-i="Patterns">Patterns</span></td>
                <td class="exclusionPassKeysTd"><span class="exclusionHeader" data-i="Keys">Keys</span></td>
                <td class="exclusionRemoveTd"></td>
              </tr></thead>
              <tbody></tbody>
            </table>
            <template id="exclusionTemplate"><table><tr class="exclusionRule">
                <td>
                  <input type="text" class="pattern" placeholder=":https://example.net/" autocomplete="off" />
                </td>
                <td>
                  <input type="text" class="passKeys" placeholder="f j &lt;c-j&gt; K" lang="en" autocomplete="off" />
                </td>
                <td>
                  <a class="remove" role="button" tabindex="0" title="Remove"
                      ><svg class="btn_svg" viewBox="0 0 16 16"><path d="M4 4l8 8zM4 12L12 4"></path></svg></a>
                </td>
              </tr></table>
            </template>
          </div>
          <div id="exclusionToolbar" style="visibility: hidden;">
            <button class="float-right fixed-size" id="exclusionAddButton" data-i="2">Add rule</button>
            <button class="float-right fixed-size" id="exclusionSortButton" data-delay=""
                data-i="3">Sort rules</button>
            <label class="booleanOption innerLine" style="display: none;" tabindex="-1" aria-hidden="true">
              <input id="exclusionOnlyFirstMatch" type="checkbox" tabindex="-1" aria-hidden="true"
                  data-model="Boolean" />
              <span data-i="4" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >At most one match</span>
            </label>
            <label class="booleanOption innerLine checkboxWrapper" style="display: none;"
                tabindex="-1" aria-hidden="true">
              <input id="exclusionListenHash" type="checkbox" tabindex="-1" aria-hidden="true"
                  data-model="Boolean" data-permission="webNavigation" />
              <span data-i="5" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Listen hash changes</span>
            </label>
          </div>
        </td>
        <td class="help"><div class="help-inner">
          <span data-i="6"></span><a href="#" data-href="vimium://wiki/Enable-or-Disable-all-frames-by-a-shortcut"
              data-i="6_2" data-vim-url>Wholly or partially disable</a><span data-i="6_3"> Vimium C.
            A "</span><var data-i="Pattern">Pattern</var><span data-i="7">" is a JS regular expression
              if it starts with "</span><kbd class="wrap-space">^</kbd><span data-i="8">",
            or "</span><kbd class="wrap-space">:</kbd><span data-i="9">" + the header of a URL</span><span
              ><span data-i="9_1">, </span><span
                data-permission="C95,.URLPattern"><span data-i="9_2">or "</span><kbd class="wrap-space">`</kbd><span
                data-i="9_3">" + </span><a
                title="URLPattern() - Web APIs | MDN" target="_blank" rel="noopener noreferrer"
                href="https://developer.mozilla.org/en-US/docs/Web/API/URLPattern/URLPattern">URLPattern</a><span
                data-i="9_4"> (a way to match URLs in W3C spec.)</span></span></span><span data-i="9_5">. </span><span
                data-i="9_6">Otherwise it will be converted.</span>
          <br>
          <div style="padding-top: 12px">
          <span data-i="10">If "</span><var data-i="Keys">Keys</var><span data-i="11">" is empty,
            Vimium C gets wholly disabled;</span><br>
          <span data-i="12">if "</span><var data-i="Keys">Keys</var><span data-i="13">"
              starts with "</span><kbd class="wrap-space">^</kbd><span data-i="14">",
            only listed keys are enabled,<br>
          and all others are passed through;<br> </span><span
              data-i="15">otherwise, just the listed keys are passed through.</span></div>
        </div></td>
      </tr>
      <tr>
        <td class="caption" data-i="16">Custom key mappings</td>
        <td>
          <textarea id="keyMappings" class="code" inputmode="text" data-model="Text" data-check=""
            placeholder="# Insert your preferred key mappings here."></textarea>
          <div class="info">
            <span data-i="16_2">The related option "</span><label data-for="#keyLayout:#alwaysIgnore,#ignoreIfNotASCII"
                class="ref-text name-of-related" role="link" for="alwaysIgnore">Always ignore keyboard layout</label><span
                data-i="16_3"
              >" is </span><span class="status-of-related">enabled</span><span data-i="16_4"></span>
          </div>
        </td>
        <td id="mappingsHelp" class="help"><div class="help-inner">
          <div>
            <span data-i="17"></span><a href="#" target="_blank" rel="noopener noreferrer" title="Key Mapping Rule Help"
                data-i="17_2-t" data-vim-url data-href="vimium://home#custom-key-mappings"
              ><span data-i="17_3">Remap keys and commands</span></a><span data-i="17_4">. Some examples:</span>
          </div>
          <code>
          <pre>
map f <a href="#" target="_blank" rel="noopener noreferrer" title="LinkHints Configuration" data-i="17_5-t"
    data-vim-url data-href="vimium://wiki/Add-or-remove-hints">LinkHints.activate</a>
unmap &lt;a-f1&gt;
mapKey &lt;c-s-e&gt; &lt;esc&gt;
shortcut createTab position="end" url=&#8230;
shortcut userCustomized1 command="goBack"
# "unmapAll" <span data-i="18">unmaps all above and default</span></pre>
          </code>
          <a id="showCommands" href="#commands" data-hash="commands" data-delay="" data-i="19">
            Show available commands</a><span data-i="period">.</span><span data-i="NS">
          </span><a
              class="wrap-left-space" data-auto-resize="keyMappings" role="button" tabindex="0" data-i="autoResize">
            Auto resize</a><span data-i="period">.</span>
          <br><a href="#" target="_blank" rel="noopener noreferrer"
              data-vim-url data-href="vimium://wiki/Use-in-another-keyboard-layout" data-i="20">
            How to map keys in another keyboard layout?
          </a>
          <br><a href="#" target="_blank" rel="noopener noreferrer" data-vim-url
              data-href="vimium://wiki/Map-a-key-to-different-commands-on-different-websites" data-i="20_2">
            How to map differently on websites?</a> <a href="#" target="_blank" rel="noopener noreferrer"
              data-vim-url data-href="vimium://wiki" data-i="20_3">How to &#8230;?
          </a>
          <br><span data-i="21">Global shortcuts</span><span data-i="22"> are
            on </span><a id="openExtensionsPage" href="chrome://extensions/shortcuts"
            >chrome://extensions/&#8230;</a><span data-i="23">; </span><a id="shortcutHelper"
              target="_blank" rel="noopener noreferrer" aria-haspopup="true"
              href="https://chrome.google.com/webstore/detail/shortcut-forwarding-tool/clnalilglegcjmlgenoppklmfppddien"
              data-i="sft-t" title="Shortcut Forwarding Tool:&#10;Provide 32 configurable shortcuts"
              ><span data-i="24">More?</span></a>
        </div></td>
      </tr>
      <tr>
        <td class="caption caption-2x"><span data-i="37" class="caption-t">Characters used for link hints</span></td>
        <td>
          <input id="linkHintCharacters" type="text" data-model="NonEmptyText"
            data-converter="lower chars" class="code" autocomplete="off"
            /><input id="linkHintNumbers" type="text" data-model="NonEmptyText"
            data-converter="lower chars" class="code" style="display: none;" autocomplete="off" />
          <div class="info">
            <span data-i="16_2">The related option "</span><label data-for="#filterLinkHints" for="filterLinkHints"
                class="ref-text" role="link" data-i="37_2">Use link name</label><span data-i="16_3"
              >" is </span><span class="status-of-related">enabled</span><span
                data-i="16_4"></span><span data-i="semicolon">;</span><span data-i="NS">
            </span><span data-i="nonEmpty">Delete all to reset this option.</span>
          </div>
        </td>
        <td class="help"><div class="help-inner" data-i="38" style="padding-top: 1px;">
          The characters placed next to each link after typing "f" to enter link-hint mode.
        </div></td>
      </tr>
      <tr id="searchUrlBox">
        <td class="caption" data-i="29">Default search engine</td>
        <td>
          <input id="searchUrl" type="text" inputmode="url" data-model="NonEmptyText" data-check="" autocomplete="off"/>
          <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
        </td>
        <td class="help"><div class="help-inner line-input">
          <span data-i="30">Used when no search engine (or "</span><kbd>~</kbd><span data-i="31">") matched.</span>
        </div></td>
      </tr>
      <tr>
        <td class="caption" data-i="32">Custom search engines</td>
        <td>
          <textarea id="searchEngines" data-model="NonEmptyText" autocomplete="off"></textarea>
          <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
        </td>
        <td class="help"><div class="help-inner">
          <span data-i="33">Define search engines to build URLs. Format:</span>
          <code>
          <pre>
a|A|MainName: https://a.com/?q=<span data-i="twoS-t" title="%s is equal with $s">%s</span>
js\:|JS: javascript:\ $S; Run JavaScript
key: https://c.com/$s/space=\s\ space_end
# <span data-i="34">this is a comment</span></pre>
          </code>
          <kbd data-i="twoS-t" title="%s is equal with $s">$s</kbd>
            <span data-i="35">will be replaced with real queries</span><span data-i="period">.</span><span
              data-i="NS"></span><a
              data-auto-resize="searchEngines" role="button" tabindex="0" data-i="autoResize">Auto resize
            </a><span data-i="period">.</span><br>
          <a href="#" target="_blank" rel="noopener noreferrer" data-i="36"
              data-vim-url data-href="vimium://wiki/Search-engine-rules">
            How to write advanced search engine rules?
          </a>
        </div></td>
      </tr>
        <tr><td colspan="2"><header id="advanced" data-i="39">Advanced Options</header></td><td></td></tr>
        <tr id="optionalPermissionsBox">
          <td class="caption" data-i="103_2">Optional permissions</td>
          <td id="optionalPermissions">
            <template id="optionalPermissionsTemplate">
              <label class="optional-permission" tabindex="-1" aria-hidden="true">
                <input type="checkbox" tabindex="-1" aria-hidden="true"/>
                <span class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"></span>
              </label>
            </template>
          </td>
          <td class="help"><div class="help-inner">
            <div data-i="103_3">Check to enable some features on this computer.</div>
            <div id="navPermissionTip" style="display: none;"><span data-i="103_4">Some permissions
              can only be granted or revoked on</span>
              <a id="gotoCrSC" href="chrome://settings/content" target="_blank">chrome://settings/content</a><span
                data-i="103_5"> manually.</span></div>
            <div data-i="103_6">Note: these may not be synchronized by your browser.</div>
          </div></td>
        </tr>
      </tbody>
      <tbody id="keyLayout" data-model="Number">
        <tr>
          <td class="caption" rowspan="4" data-i="47">Keyboard layout rules</td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="alwaysIgnore" type="checkbox" tabindex="-1" aria-hidden="true" />
              <span data-i="47_2" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Always ignore keyboard layout</span>
            </label>
          </td>
          <td class="help" rowspan="2"><div class="help-inner line-help">
            <div data-i="47_3">Please note this group of settings and <kbd>mapKey</kbd> directives
              can only take effect inside Vimium C.</div>
            <div data-i="47_4">
              "Ignoring" means to use the en-US QWERTY layout and ignore CapsLock status during recognizing keys.</div>
          </div></td>
        </tr>
        <tr>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="ignoreIfAlt" type="checkbox" tabindex="-1" aria-hidden="true" />
              <span data-i="48" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Ignore layout when holding down Alt (Option, &#8997;) key</span>
            </label>
          </td>
        </tr>
        <tr>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="ignoreIfNotASCII" type="checkbox" tabindex="-1" aria-hidden="true" />
              <span data-i="49" data-i2="49_2" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Ignore layout if a key is not located in 7-bit ASCII</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help" data-i="49_3">
            If partially selected, only ignore layout for in-command shortcuts,
            but not in default normal or insert modes.
          </div></td>
        </tr>
        <tr>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="ignoreCaps" type="checkbox" tabindex="-1" aria-hidden="true" />
              <span class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                  data-i="50">Ignore CapsLock status</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help" data-i="50_2">
            If partially selected, only ignore CapsLock on macOS.
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="mapModifier" type="checkbox" tabindex="-1" aria-hidden="true" />
              <span data-i="53" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Allow mapping right-hand (or left-hand) modifier keys</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help">
            <span data-i="53_2">Give one-hand modifier keys a name
                of "</span><kbd class="sel-all">modifier</kbd><span data-i="53_3">".
              Right-Shift (left if partially selected) is "</span>&lt;s-modifier&gt;<span data-i="53_4">".</span>
          </div></td>
        </tr>
        <tr id="testKeyInputBox">
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="testKeyInInput" type="checkbox" tabindex="-1" aria-hidden="true" />
              <span data-i="53_5" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Test a key</span>
            </label>
            <span id="testKeyInput" tabindex="0" autocomplete="off" /></span>
          </td>
          <td class="help"><div class="help-inner line-help" data-i="53_6">
            Here are key names directly received from this browser,
            so not affected by exclusion rules or "mapKey"s.
          </div></td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td class="caption" data-i="40">Scroll step size</td>
          <td>
            <label><input id="scrollStepSize" type="number" min="30" max="300" step="10" lang="en"
              data-model="Number" autocomplete="off" />
            <span data-i="41">pixels</span></label>
            <span data-i="41_2">in</span>
            <label><input id="keyupTime" type="number" min="50" max="1200" step="10" lang="en"
              data-model="Number" autocomplete="off" />
            <span data-i="41_3">milliseconds</span></label>
          </td>
          <td class="help"><div class="help-inner line-input" data-i="42">
            The size for basic long movements (short = * 0.6).
          </div></td>
        </tr>
        <tr>
          <td class="caption" rowspan="2" data-i="43">Miscellaneous options</td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="smoothScroll" type="checkbox" tabindex="-1" aria-hidden="true" data-model="Boolean" />
              <span data-i="44" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Use Vimium C's smooth scrolling</span>
            </label>
          </td>
        </tr>
        <tr>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="filterLinkHints" type="checkbox" tabindex="-1" aria-hidden="true" data-model="Boolean" />
              <span data-i="44_2" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Use the link's name and characters for link-hint filtering</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help">
            <span data-i="44_3">
            In link-hint mode, this option lets you select a link by typing its text.
            </span><a href="#" target="_blank" rel="noopener noreferrer" data-i="help" data-vim-url
                data-href="vimium://wiki/Using-Link-Hints">Online help</a><span data-i="period">.</span>
          </div></td>
        </tr>
        <tr id="waitForEnterBox">
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="waitForEnter" type="checkbox" tabindex="-1" aria-hidden="true" data-model="Boolean" />
              <span data-i="44_4" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Require "Enter" when filtering hints</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help" data-i="44_5">
            You activate the link with "Enter", always; so you never accidentally type Vimium C commands.
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="mouseReachable" type="checkbox" tabindex="-1" aria-hidden="true" data-model="Boolean" />
              <span data-i="44_6" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Detect whether links are completely covered or not</span>
            </label>
          </td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="grabBackFocus" type="checkbox" tabindex="-1" aria-hidden="true" data-model="Boolean" />
              <span data-i="45" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Don't let pages steal the focus in loading</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help" data-i="46">
            Prevent pages from focusing an input in loading (e.g. Google, Bing, etc.).
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="regexFindMode" type="checkbox" tabindex="-1" aria-hidden="true" data-model="Boolean" />
              <span data-i="54" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Treat find queries as JavaScript regular expressions</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help">
            <span data-i="55">Switch back to plain find mode by the "</span><kbd>\R</kbd><span data-i="56">"
              escape sequence.</span>
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="hideHud" type="checkbox" tabindex="-1" aria-hidden="true" data-model="Boolean" />
              <span data-i="57" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Hide the Heads Up Display (HUD) in insert mode</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help" data-i="58">
            When enabled, the HUD will not be displayed in insert mode, just like a parameter of `hideHUD=true`.
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="autoDarkMode" type="checkbox" tabindex="-1" aria-hidden="true"
                  data-model="Boolean" data-map="[0,1,2]" data-permission="C76,(prefers-color-scheme)" />
              <span data-i="59" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Auto switch between light and dark mode</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help" data-i="60">
            Make UI follow your system's dark mode. If partially selected, UI will always be dark.
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="autoReduceMotion" type="checkbox" tabindex="-1" aria-hidden="true"
                  data-model="Boolean" data-map="[0,1,2]" data-permission="C74,(prefers-reduced-motion)" />
              <span data-i="61" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Auto reduce UI motions following your system settings</span>
            </label>
          </td>
          <td class="help"><div class="help-inner" data-i="62">
            Affect some animation of HUD and Vomnibar. If partially selected, it will always reduce motion.
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="showActionIcon" type="checkbox" tabindex="-1" aria-hidden="true"
                  data-model="Boolean" data-permission="action" />
              <span data-i="63" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Show extension icon dynamically on the top right</span>
            </label>
          </td>
          <td class="help"><div id="showActionIconHelp" class="help-inner line-help" data-i="64">
            Make it reflect working states on a current page.<br>
            If this is unchecked, Vimium C will be a little faster.
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="showInIncognito" type="checkbox" tabindex="-1" aria-hidden="true"
                  data-model="Boolean" data-permission="C64,nonC" />
              <span data-i="64_2" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Always prevent browser from caching images showing on Display</span>
            </label>
          </td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="keepWorkerAlive" type="checkbox" tabindex="-1" aria-hidden="true"
                  data-model="Boolean" data-permission="mv3,nonFF" />
              <span data-i="64_3" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Try to keep this extension working</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-help" data-i="64_4">
            Browsers like Chromium will auto terminate extensions not working on any tab, and cause unexpected errors.
          </div></td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="notifyUpdate" type="checkbox" tabindex="-1" aria-hidden="true" data-model="Boolean" />
              <span data-i="64_5" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Show a notification on a new release</span>
            </label>
          </td>
        </tr>
        <tr>
          <td class="caption"></td>
          <td>
            <label class="booleanOption" tabindex="-1" aria-hidden="true">
              <input id="vimSync" type="checkbox" tabindex="-1" aria-hidden="true"
                  data-model="Boolean" data-allow-null="true" data-permission="storage" data-check="" />
              <span data-i="65" class="checkboxHint" role="checkbox" tabindex="0" aria-hidden="false"
                >Synchronize settings with your current account for this browser</span>
            </label>
          </td>
          <td class="help"><div class="help-inner line-2x" data-i="66">
            Need to reload Vimium C manually.
          </div></td>
        </tr>
        <tr id="newTabUrlBox">
          <td class="caption" data-i="25">New tab URL</td>
          <td>
            <input id="newTabUrl" type="text" inputmode="url" data-model="NonEmptyText" data-check autocomplete="off" />
            <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
          </td>
          <td class="help"><div class="help-inner">
            <span data-i="lquote">"</span><kbd class="sel-all" role="button" tabindex="0">pages/blank.html</kbd><span
                data-i="rquote">"</span> <span data-i="26">for a blank page.
            </span><a target="_blank" rel="noopener noreferrer" data-i="NewTabAdapterDesc-t"
                id="newTabAdapter" title="NewTab Adapter:&#10;Take over browser's new tab settings"
                href="https://chrome.google.com/webstore/detail/newtab-adapter/cglpcedifkgalfdklahhcchnjepcckfn"
            ><span data-i="27">Like to focus web page on </span><span id="Ctrl">Ctrl</span>+T<span
                data-i="27_2">?</span></a> <a
                href="#" target="_blank" rel="noopener noreferrer" data-i="28"
                data-vim-url data-href="vimium://wiki/Use-another-extension-as-the-New-Tab"
            >How to open another newtab?
            </a>
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="68">Previous patterns</td>
          <td>
            <input id="previousPatterns" type="text" data-model="NonEmptyText" autocomplete="off" />
            <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
          </td>
          <td class="help"><div class="help-inner" data-i="69">
            The "navigate to previous page" command uses these patterns to find the link to follow (ignore case).
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="70">Next patterns</td>
          <td>
            <input id="nextPatterns" type="text" data-model="NonEmptyText" autocomplete="off" />
            <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
          </td>
          <td class="help"><div class="help-inner" data-i="71">
            The "navigate to next page" command uses these patterns to find the link to follow (ignore case).
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="72">Custom CSS for Vimium C UI</td>
          <td>
            <textarea id="userDefinedCss" class="code min-height-4" inputmode="text" data-model="Text" lang="en"
              placeholder="/* example: */ .LH { color: red; }
/* #find */ * { color: green; }
/* #omni */
* { color: blue; } .inactive { opacity: 1; }"
              ></textarea>
          </td>
          <td class="help"><div class="help-inner">
            <span data-i="73">To style Vimium C nodes, use selectors such as "</span><kbd>.S</kbd><span
                data-i="74">" and "</span><kbd>.LH &gt; .MC</kbd><span
                data-i="75">"</span><span id="tipForNoShadow"></span><span data-i="period">.</span><br>
            <span data-i="76">These styles work in addition to and take precedence over Vimium C's
              default styles.
            </span><a class="wrap-left-space" data-auto-resize="userDefinedCss" role="button" tabindex="0"
                data-i="autoResize">Auto resize</a><span data-i="period">.</span><br>
            <a href="#" target="_blank" rel="noopener noreferrer" data-i="76_2"
                data-vim-url data-href="vimium://wiki/Style-the-UI-of-Vimium-C-using-Custom-CSS">
              How to style UI components in different DOM scopes?</a>
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="77">Vomnibar settings</td>
          <td>
            <textarea id="vomnibarOptions" class="code" data-model="JSON" lang="en"></textarea>
            <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
          </td>
          <td class="help"><div class="help-inner">
            <div data-i="78">Adjust some inner behaviors of Vomnibar:</div>
            <div class="help-block">
              <div><span data-i="lquote">"</span><var>maxMatches</var><span data-i="rquote">"</span> <span
                  data-i="79">should be in</span> <kbd>3 ~ 25</kbd>
                <span data-i="79_2"></span><span data-i="semicolon">;</span></div>
              <div><span data-i="lquote">"</span><var>queryInterval</var><span data-i="rquote">"</span> <span
                  data-i="79">should be in</span> <kbd>0 ~ 1200</kbd><span data-i="81">
                (unit: ms)</span><span data-i="80"> ;</span></div>
              <div><span data-i="lquote">"</span><var>size</var><span data-i="rquote">"</span> <span
                  data-i="82">is to calculate Vomnibar's height;</span></div>
              <div class="indent"><span data-i="lquote">"</span><var>styles</var><span data-i="rquote">"</span> <span
                  data-i="83">may be "</span><kbd class="sel-all">dark</kbd><span
                  data-i="83_2">" &amp; "</span><kbd class="sel-all">mono-url</kbd><span
                  data-i="83_2">" &amp; "</span><kbd class="sel-all">time</kbd><span
                  data-i="83_2">" &amp; "</span><kbd class="sel-all">absolute-time</kbd><span
                  data-i="84">".</span></div>
              <div><span data-i="lquote">"</span><var>actions</var><span data-i="rquote">"</span> <span
                  data-i="83">may be "</span><kbd class="sel-all">opener</kbd><span
                  data-i="83_2">" &amp; "</span><kbd class="sel-all">icase</kbd><span data-i="84">".</span></div>
            </div>
            <span data-i="85">A low</span> <var>queryInterval</var>
              <span data-i="86">will cause CPU cost a bit higher.</span>
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="86_2">Auto substitution of various text</td>
          <td>
            <textarea id="clipSub" class="code min-height-5" data-model="Text"
              placeholder="/* example: */
c/regexp-to-replace/target-string/g
p:regexp-to-replace:target-string:i"
              ></textarea>
          </td>
          <td class="help"><div class="help-inner"><div><span data-i="86_3">
            Substitute text before doing real actions, when copying / pasting through Vimium C's commands.<br>
            Support a simpler version of syntax of the "sed" tool.</span><br>
            <span data-i="86_32">The prefix character may be</span> <kbd>c|p|s|i|g</kbd><span data-i="86_4"> &#8230;;
            "c" means copying, "p" for pasting and "s" for both</span><span data-i="period">.</span><span data-i="NS">
            </span><a class="wrap-left-space" data-auto-resize="clipSub" role="button" tabindex="0"
                data-i="autoResize">Auto resize</a><span data-i="period">.</span></div>
            <div><a href="#" target="_blank" rel="noopener noreferrer" data-i="86_5"
                data-vim-url data-href="vimium://wiki/Substitute-URLs-and-text-during-commands"
                >How to substitute text during other commands?</a></div>
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="87">Block list of words for Vomnibar</td>
          <td>
            <textarea id="omniBlockList" class="code min-height-4 masked" data-model="MaskedText"></textarea>
          </td>
          <td class="help"><div class="help-inner">
            <div data-i="88">For a bookmark / history item,
            if its title or URL contains any word or phrase in this list,
            it will not be listed on Vomnibar or the browser omnibox.</div>
            <span data-i="89">One piece per line; no trimming; case-sensitive; "</span><kbd>#</kbd><span
                data-i="90">" at the beginning means comments</span><span data-i="period">.</span><span data-i="NS">
            </span><a class="wrap-left-space" data-auto-resize="omniBlockList" role="button" tabindex="0"
                data-i="autoResize">Auto resize</a><span data-i="period">.</span>
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="91">Allow list of other extension IDs</td>
          <td>
            <textarea id="extAllowList" class="code min-height-4" data-model="NonEmptyText"
              data-permission="web_accessible_resources"></textarea>
            <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
          </td>
          <td class="help"><div class="help-inner">
            <div data-i="92">Only extensions in this list are allowed to request Vimium C's support.
            One extension id per line.</div>
            <span data-i="93">Any line the first char of which is neither a letter nor a number or
              "</span><kbd>_</kbd><span data-i="94">" will be ignored</span><span
                data-i="period">.</span><span data-i="NS">
            </span><a class="wrap-left-space" data-auto-resize="extAllowList" role="button" tabindex="0"
                data-i="autoResize">Auto resize</a><span data-i="period">.</span><br>
            <a href="#" target="_blank" rel="noopener noreferrer" data-i="95"
                data-vim-url ="vimium://wiki/Inject-into-other-extensions">
              How to inject Vimium C into other extensions?</a>
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="95_2">Compatibility of Escape</td>
          <td>
            <input id="passEsc" type="text" inputmode="text" lang="en" data-model="NonEmptyText" autocomplete="off" />
            <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
          </td>
          <td class="help"><div class="help-inner break-all" data-i="95_3">
            In plain insert mode, specify when to pass <kbd>Escape</kbd> keydown events to pages and delay blurring.
            The default value may collapse some search suggestions.
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="96">Preferred Vomnibar page</td>
          <td>
            <input id="vomnibarPage" type="text" inputmode="url" lang="en"
                data-model="NonEmptyText" autocomplete="off" />
            <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
          </td>
          <td class="help"><div class="help-inner break-all">
            <span data-i="97">For example: </span><kbd class="sel-all" role="link" id="chromeExtVomnibar"
title="Note: Need to install and enable the extension first" data-i="needToInstallExt-t"
              tabindex="0"><span>chrome</span>-extension://<a
              title="NewTab Adapter - Chrome Web Store" target="_blank" rel="noopener noreferrer" tabindex="0"
              href="https://chrome.google.com/webstore/detail/newtab-adapter/cglpcedifkgalfdklahhcchnjepcckfn"
            >cglpcedifkgalfdklahhcchnjepcckfn</a>/vomnibar.html</kbd>
            <span data-i="98">or</span>
            <kbd class="sel-all" role="link" data-i="webPageLimits-t" tabindex="0"
title="Note: Web pages are no usable on extension pages,
so only the default inner version will be used on them"
            >https://gdh1995.cn/vomnibar.html</kbd> <span data-i="period">.</span>
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="99">Local encoding fallback</td>
          <td>
            <input id="localeEncoding" type="text" inputmode="text" lang="en"
                data-model="Text" data-converter="lower" autocomplete="off" />
            <div class="info">utf-8 <span data-i="99_2">works just like it's empty.</span></div>
          </td>
          <td class="help"><div class="help-inner">
            <span data-i="100">In order to recognize URLs not encoded by "utf-8".</span><br>
            <span data-i="102">The default "gbk" is for Chinese, Japanese and Korean.</span>
          </div></td>
        </tr>
        <tr>
          <td class="caption" data-i="104">Keyboard settings</td>
          <td>
            <input id="keyboard" type="text" inputmode="numeric"
                data-model="JSON" data-check="" lang="en" autocomplete="off" />
            <div class="info" data-i="nonEmpty">Delete all to reset this option.</div>
          </td>
          <td class="help"><div class="help-inner">
            <div data-i="105">
              Your keyboard delay settings on this computer.
            </div>
            <span data-i="106">Format: </span><kbd>[&lt;<span
                data-i="107">delay</span>&gt;, &lt;<span data-i="108">repeat period</span>&gt;]</kbd><span
                data-i="108_2"> (unit: ms).</span><br>
            <span data-i="109">Note: this option will never be synchronized.</span>
          </div></td>
        </tr>
      </tbody>
    </table>

    <div id="footer">
      <div id="footerWrapper">
        <span id="helpText">
          <a id="openInTab" href="" target="_blank" style="display: none;">Open this options page in a new tab.</a>
          <span><span class="Vim">Vim</span>ium <span class="C">C</span>
          <a href="#" data-vim-url data-href="vimium://release"
              target="_blank" rel="noopener noreferrer"><span id="version"></span></a><span></span><span
              data-i="comma">,</span><span data-i="NS">
            </span><span id="browserName"></span><span data-i="period">.</span></span><br>
          <strong><kbd>&lt;c-enter&gt;</kbd></strong> <span data-i="112">to save <i>all</i> options,
          </span><strong id="questionShortcut">?</strong> <span data-i="113">to show help.</span>
        </span>
        <span id="footerButtons">
          <button id="saveOptions" class="fixed-size" disabled="disabled" data-i="115">No changes</button>
        </span>
        <span id="settingFileManager">
          <input  id="settingsFile" type="file" class="hidden" accept="application/json" data-delay="continue" />
          <button id="importButton" class="left" data-i="116">Import settings</button><select
              id="importOptions" class="right" data-delay="">
            <option value="exported" selected="selected" data-i="117">&nbsp;Exported file</option>
            <option class="option-hr" disabled="disabled">&nbsp;-----------------</option>
            <option id="recommendedSettings" value="recommended" data-i="118">&nbsp;Recommended</option>
          </select>
          <button id="exportButton" data-hash="export" data-delay="event" data-i="119">Export settings</button>
        </span>
      </div>
    </div>
  </body>
</html>
